<template>
  <view class="">
    <!-- 定位 START -->
    <view class="search-view">
      <image src="../../../static/coen/dingwei.svg" mode="widthFix"></image>
      <text class="search-text">阿里巴巴淘宝城2期西溪园区</text>
      <text>></text>
    </view>
    <!-- 定位 END -->
    <!-- 搜索 START-->
    <view class="search-cont">
      <view class="search" @click="seaRch()">
        <image src="../../../static/coen/sousuo.svg" mode="widthFix" class="search-img"></image>
        <!-- 禁止输入框, 因为点击后要跳转到搜索页面 -->
        <input type="text" placeholder="麻辣烫" disabled />
      </view>
    </view>
    <!-- 搜索 END-->
    <!-- 轮播  START-->
    <view class="swiper-view">
      <swiper :autoplay="false" :interval="2000" :duration="1000" @change="bannerfun">
        <block v-for="(item, index) in lable" :key="index">
          <swiper-item>
            <view class="swiper-item">
              <block v-for="(listdata, index) in item" :key="index">
                <view class="conteng-img" @click="clickItem(index)">
                  <image :src="listdata.img" mode="widthFix" class="uploadimg"></image>
                  <text>{{ listdata.title }}</text>
                </view>
              </block>
            </view>
          </swiper-item>
        </block>
      </swiper>
    </view>
    <!-- 轮播  END-->
    <!-- 指示点  START-->
    <view class="instruct-view">
      <block v-for="(listdata, index) in instructdata" :key="index">
        <view class="instruct" :class="{ active: index == num }">{{ listdata }}</view>
      </block>
    </view>
    <!-- 指示点  END-->
  </view>
</template>

<script>
export default {
  data() {
    return {
      // 滑块区域 的 数值
      num: 0,
      // 面板指示点 两个就是两页 三个就是三页
      instructdata: ['', ''],
      // 轮播数组
      lable: [
        [
          {
            img: '/static/inster/meishi.png',
            title: '美食',
          },
          {
            img: '/static/inster/chaoshi.png',
            title: '超市便利',
          },
          {
            img: '/static/inster/shuiguo.png',
            title: '蔬菜水果',
          },
          {
            img: '/static/inster/meituan.png',
            title: '美团专送',
          },
          {
            img: '/static/inster/paotui.png',
            title: '跑腿代购',
          },
          {
            img: '/static/inster/yexiao.png',
            title: '夜宵',
          },
          {
            img: '/static/inster/jintie.png',
            title: '津贴联盟',
          },
          {
            img: '/static/inster/pinping.png',
            title: '甜点饮品',
          },
          {
            img: '/static/inster/shaokao.png',
            title: '龙虾烧烤',
          },
          {
            img: '/static/inster/dangao.png',
            title: '甜蜜蛋糕',
          },
        ],
        [
          {
            img: '/static/inster/hanbao.png',
            title: '汉堡披萨',
          },
          {
            img: '/static/inster/liaoli.png',
            title: '日韩料理',
          },
          {
            img: '/static/inster/malatang.png',
            title: '麻辣烫',
          },
          {
            img: '/static/inster/kuaican.png',
            title: '快食简餐',
          },
          {
            img: '/static/inster/xianhua.png',
            title: '浪漫鲜花',
          },
          {
            img: '/static/inster/lazi.png',
            title: '无辣不欢',
          },
          {
            img: '/static/inster/jiaozi.png',
            title: '饺子馆',
          },
          {
            img: '/static/inster/xiaochi.png',
            title: '小吃馆',
          },
          {
            img: '/static/inster/baofan.png',
            title: '煲仔饭',
          },
          {
            img: '/static/inster/qita.png',
            title: '其他',
          },
        ],
      ],
    }
  },
  created() {
    // 得到 数组 的 一维长度
    this.getListLenht()
  },
  methods: {
    // 滑块事件
    bannerfun(e) {
      console.log(e.detail.current)
      this.num = e.detail.current
    },
    // 搜索
    seaRch() {
      wx.navigateTo({
        url: '../search/search',
      })
      // console.log('seaRch..')
    },
    // 点击各个按钮
    clickItem(index) {
      console.log(index)
    },
    // 得到 lable 数组的一维长度
    getListLenht() {
      console.log('this.lable.length = ',this.lable.length)
    },
  },
}
</script>

<style scoped>
.search-view image {
  width: 35upx;
  height: 35upx;
}
.search-view {
  font-size: 30upx;
  font-weight: bold;
  display: flex;
  align-items: center;
  height: 80upx;
}
.search-text {
  padding: 0 10upx;
}
/* 搜索 */
.search-img {
  margin: auto 0 auto 20upx;
  width: 40upx;
  height: 40upx;
}
.search {
  height: 70upx;
  line-height: 70upx;
  width: 100%;
  display: flex;
  flex-direction: flex;
  background: #eff3f4;
  border-radius: 10rpx;
}
.search input {
  height: 70upx;
  line-height: 70upx;
  width: 100%;
  font-size: 25upx;
  color: #666666;
}
.search-cont {
  display: flex;
  justify-content: space-between;
  height: 70upx;
  align-items: center;
}
/* 轮播 */

swiper {
  height: 320upx !important;
}
/* 九宫格 */
.swiper-item {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  height: 320upx;
}
.conteng-img {
  width: calc((100% / 5) - 12px) !important;
  margin: 6px;
  /* height: 120upx; */
  position: relative;
  text-align: center;
}
.conteng-img text {
  padding-top: 20upx;
  font-size: 25upx;
}
.uploadimg {
  width: 70upx;
  height: 70upx;
  border-radius: 50upx;
  display: block;
  margin: 0 auto;
}
/* 指示点 */
.instruct-view {
  display: flex;
  justify-content: center;
  padding-top: 10upx;
}
.instruct {
  background: #e6e6e6;
  height: 10upx;
  width: 30upx;
  border-radius: 50upx;
  margin: 0 10upx;
}
.active {
  background: #fbae22 !important;
}
</style>
